<title>分页</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">分页</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">分页</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Basic Pagination start -->
<section id="basic-pagination">
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Pagination</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Simple pagination  for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.</p>
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<h5>Basic Pagination</h5>
								<p>Default pagination without next previous.</p>
								<nav class="mb-3" aria-label="Page navigation">
									<ul class="pagination">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
							</div>
							<div class="col-lg-6 col-md-12">
								<h5>Pagination with Next/Prev Arrows</h5>
								<p>Default pagination with next previous icons.</p>
								<nav class="mb-3" aria-label="Page navigation">
									<ul class="pagination">
										<li class="page-item"><a class="page-link" href="#" aria-label="Previous">«</a>
										</li>
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
										<li class="page-item">
											<a class="page-link" href="#" aria-label="Next">»</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<h5>Pagination with Next/Prev Link</h5>
								<p>Default pagination with next previous links.</p>
								<nav class="mb-3" aria-label="Page navigation">
									<ul class="pagination">
										<li class="page-item">
											<a class="page-link" href="#" aria-label="Previous">
												<span aria-hidden="true">Prev</span>
												<span class="sr-only">Previous</span>
											</a>
										</li>
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
										<li class="page-item">
											<a class="page-link" href="#" aria-label="Next">
												<span aria-hidden="true">Next</span>
												<span class="sr-only">Next</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
							<div class="col-lg-6 col-md-12">
								<h5>Pagination with Next/Prev Link &amp; Arrows</h5>
								<p>Default pagination with next previous icons &amp; text.</p>
								<nav class="mb-3" aria-label="Page navigation">
									<ul class="pagination">
										<li class="page-item">
											<a class="page-link" href="#" aria-label="Previous">
												<span aria-hidden="true">« Prev</span>
												<span class="sr-only">Previous</span>
											</a>
										</li>
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
										<li class="page-item">
											<a class="page-link" href="#" aria-label="Next">
												<span aria-hidden="true">Next »</span>
												<span class="sr-only">Next</span>
											</a>
										</li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Basic Pagination end -->


<!-- Pagination Round Style start -->
<section id="round-pagination">
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pagination Round Style</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<h5>Round Pagination</h5>
								<p>Round Style pagination use <code>.pagination-round</code> to <code>.pagination</code> class.</p>
								<div class="text-center mb-3">
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-round">
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
										</ul>
									</nav>
								</div>
							</div>
							<div class="col-lg-6 col-md-12">
								<h5>Round Style Pagination with Next/Prev Arrows</h5>
								<p>Round Style pagination use <code>.pagination-round</code> to <code>.pagination</code> class with Previous Next Icons.</p>
								<div class="text-center mb-3">
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-round">
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Previous">
													<span aria-hidden="true">&laquo;</span>
													<span class="sr-only">Previous</span>
												</a>
											</li>
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Next">
													<span aria-hidden="true">&raquo;</span>
													<span class="sr-only">Next</span>
												</a>
											</li>
										</ul>
									</nav>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-lg-6 col-md-12">
								<h5>Round Style Pagination with Next/Prev Link</h5>
								<p>Round Style pagination use <code>.pagination-round</code> to <code>.pagination</code> class with Previous Next Icons &amp; Text.</p>
								<div class="text-center mb-3">
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-round">
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Previous">
													<span aria-hidden="true">&laquo; Prev</span>
													<span class="sr-only">Previous</span>
												</a>
											</li>
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Next">
													<span aria-hidden="true">Next &raquo;</span>
													<span class="sr-only">Next</span>
												</a>
											</li>
										</ul>
									</nav>
								</div>
							</div>
							<div class="col-lg-6 col-md-12">
								<h5>Separated Round Styled Pagination</h5>
								<p>Separated Round Style pagination use <code>.pagination-round</code> &amp; <code>.pagination-separate</code> to <code>.pagination</code> class.</p>
								<div class="text-center mb-3">
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-separate pagination-round">
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
										</ul>
									</nav>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Round Style end -->

<!-- Pagination Positions start -->
<section id="pagination-positions">
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pagination Positions</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<p>Use wrapper classes for pagination. To align left, use class <code>.justify-content-start</code>. To align center, use class <code>.justify-content-center</code>. To align right, use class <code>.justify-content-end</code>.</p>
						<div class="row">
							<div class="col-xl-4 col-lg-12">
								<h5 class="text-left">Left Align</h5>
								<nav aria-label="Page navigation">
									<ul class="pagination justify-content-start">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
							</div>
							<div class="col-xl-4 col-lg-12">
								<h5 class="text-center">Center Align</h5>
								<nav aria-label="Page navigation">
								  <ul class="pagination justify-content-center">
								    <li class="page-item"><a class="page-link" href="#">1</a></li>
								    <li class="page-item"><a class="page-link" href="#">2</a></li>
								    <li class="page-item active"><a class="page-link" href="#">3</a></li>
								    <li class="page-item"><a class="page-link" href="#">4</a></li>
									<li class="page-item"><a class="page-link" href="#">5</a></li>
								  </ul>
								</nav>
							</div>
							<div class="col-xl-4 col-lg-12">
								<h5 class="text-right">Right Align</h5>
								<nav aria-label="Page navigation">
									<ul class="pagination justify-content-end">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pagination Positions end -->

<!-- Pagination Sizes start -->
<section id="pagination-sizes">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Pagination Sizes</h4>
			<p>Use class <code>.pagination-lg</code> for large size pagination &amp; use <code>.pagination-sm</code> for small size pagination. For Default size no classes required.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pagination Sizes</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-6 col-lg-12">
								<nav aria-label="Page navigation">
									<ul class="pagination pagination-lg mb-1">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
								<nav aria-label="Page navigation">
									<ul class="pagination mb-1">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
								<nav aria-label="Page navigation">
									<ul class="pagination pagination-sm">
										<li class="page-item"><a class="page-link" href="#">1</a></li>
										<li class="page-item"><a class="page-link" href="#">2</a></li>
										<li class="page-item active"><a class="page-link" href="#">3</a></li>
										<li class="page-item"><a class="page-link" href="#">4</a></li>
										<li class="page-item"><a class="page-link" href="#">5</a></li>
									</ul>
								</nav>
							</div>
							<div class="col-xl-6 col-lg-12">
								<div class="text-center">
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-separate pagination-round pagination-lg mb-1">
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Previous">
													<span aria-hidden="true">&laquo; Prev</span>
													<span class="sr-only">Previous</span>
												</a>
											</li>
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Next">
													<span aria-hidden="true">Next &raquo;</span>
													<span class="sr-only">Next</span>
												</a>
											</li>
										</ul>
									</nav>
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-separate pagination-round mb-1">
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Previous">
													<span aria-hidden="true">&laquo; Prev</span>
													<span class="sr-only">Previous</span>
												</a>
											</li>
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Next">
													<span aria-hidden="true">Next &raquo;</span>
													<span class="sr-only">Next</span>
												</a>
											</li>
										</ul>
									</nav>
									<nav aria-label="Page navigation">
										<ul class="pagination pagination-separate pagination-round pagination-sm">
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Previous">
													<span aria-hidden="true">&laquo; Prev</span>
													<span class="sr-only">Previous</span>
												</a>
											</li>
											<li class="page-item"><a class="page-link" href="#">1</a></li>
											<li class="page-item"><a class="page-link" href="#">2</a></li>
											<li class="page-item active"><a class="page-link" href="#">3</a></li>
											<li class="page-item"><a class="page-link" href="#">4</a></li>
											<li class="page-item"><a class="page-link" href="#">5</a></li>
											<li class="page-item">
												<a class="page-link" href="#" aria-label="Next">
													<span aria-hidden="true">Next &raquo;</span>
													<span class="sr-only">Next</span>
												</a>
											</li>
										</ul>
									</nav>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pagination Sizes end -->

<!-- Pager Pagination start -->
<section id="pager-pagination">
	<div class="row">
		<div class="col-12 mt-1">
			<h4>Pager Pagination</h4>
			<p>Quick previous and next links for simple pagination implementations. It's great for simple sites like blogs or magazines.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Basic Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager">
								<li>
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li>
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.pager</code> for basic pager pagination.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Round Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager pager-round">
								<li>
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li>
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.pager.pager-round</code> for pager pagination with Round border.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Aligned to side Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager">
								<li class="previous">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li class="next">
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.previous</code> &amp; <code>.next</code> for links aligned to sides.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Align to side Round Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager pager-round">
								<li class="previous">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li class="next">
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.previous</code> &amp; <code>.next</code> for links aligned to sides.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Disabled Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager">
								<li class="disabled">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li>
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.disabled</code> for disabled pager.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Disabled Round Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager pager-round">
								<li class="disabled">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li>
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.disabled</code> for disabled pager.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Aligned to side disabled Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager">
								<li class="previous disabled">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li class="next">
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.previous</code> &amp; <code>.next</code> for links aligned to sides &amp; <code>.disabled</code> to disabled pager.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title text-center">Align to side disabled Round Pager</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
					<div class="text-center">
							<ul class="pager pager-round">
								<li class="previous disabled">
									<a href="#"><i class="ft-arrow-left"></i> Previous</a>
								</li>
								<li class="next">
									<a href="#">Next <i class="ft-arrow-right"></i></a>
								</li>
							</ul>
							<p>Use class <code>.previous</code> &amp; <code>.next</code> for links aligned to sides &amp; <code>.disabled</code> to disabled pager.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pager Pagination end -->

<!-- Pager Positions start -->
<section id="pager-positions">
	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pager Positions</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        			<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content">
					<div class="card-body">
						<p>Use wrapper classes for pager. To align left, use class <code>.float-left</code>. Default is center align. To align right, use class <code>.float-right</code>.</p>
						<div class="row">
							<div class="col-lg-4 col-md-6 col-sm-12">
								<h5 class="text-left">Left Align</h5>
								<div class="float-left my-1">
									<ul class="pager">
										<li>
											<a href="#"><i class="ft-arrow-left"></i> Previous</a>
										</li>
										<li>
											<a href="#">Next <i class="ft-arrow-right"></i></a>
										</li>
									</ul>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12">
								<h5 class="text-center">Center Align</h5>
								<div class="my-1">
									<ul class="pager">
										<li>
											<a href="#"><i class="ft-arrow-left"></i> Previous</a>
										</li>
										<li>
											<a href="#">Next <i class="ft-arrow-right"></i></a>
										</li>
									</ul>
								</div>
							</div>
							<div class="col-lg-4 col-md-6 col-sm-12">
								<h5 class="text-right">Right Align</h5>
								<div class="float-right my-1">
									<ul class="pager">
										<li>
											<a href="#"><i class="ft-arrow-left"></i> Previous</a>
										</li>
										<li>
											<a href="#">Next <i class="ft-arrow-right"></i></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Pager Positions end -->

<!-- Dynamic Pagination start -->
<section id="dynamic-pagination">
	<div class="row">
		<div class="col-12 mt-3 mb-1">
			<h4 class="text-uppercase">Dynamic Pagination</h4>
			<p>We are using <strong>jQuery Pagination plugin</strong>. This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: <code>.pagination</code>, <code>.active</code> and <code>.disabled</code>.</p>
		</div>
	</div>
	<div class="row match-height">
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Pagination</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div id="page1-content" class="border-blue-grey border-lighten-4 p-1 mb-1">You are on page 1</div>
						<div class="text-center">
							<ul class="pagination page1-links"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Default Pagination with last &amp; first</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div id="firstLast1-content" class="border-blue-grey border-lighten-4 p-1 mb-1">You are on page 1</div>
					<div class="text-center">
							<ul class="pagination firstLast1-links"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Pagination drop you here after reload</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div class="alert alert-warning">
							<strong>Warning!</strong> Page will be reload.
						</div>
						<div id="url1-content" class="border-blue-grey border-lighten-4 p-1 mb-1">You are on page 1</div>
					<div class="text-center">
							<ul class="pagination url1-links"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-6 col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Set Start Page Of Pagination</h4>
				</div>
				<div class="card-content">
					<div class="card-body">
						<div id="start-content" class="border-blue-grey border-lighten-4 p-1 mb-1">Your start Page 5</div>
					<div class="text-center">
							<ul class="pagination start-links"></ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Dynamic Pagination end -->
</div>

<script type="text/javascript">
	
</script>